<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>个人博客</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div>
    <nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" th:href="@{/}">首页</a>
            </li>
            <li class="nav-item" sec:authorize="isAnonymous()">
                <a class="nav-link" th:href="@{/login}">登录</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/register}">注册</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/logout}">注销</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/back/article}">后台管理</a>
            </li>
        </ul>
    </nav>
</div>

<div class="container mt-3">
    <ul class="list-group list-group-flush">
        <li class="list-group-item" th:each="article:${articles}">
            <h3><a class="page-link" th:href="@{'/article/'+${article.getId()}}" th:text="${article.getTitle()}">标题</a></h3>
            <p th:text="${article.getContent()}" style="display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;">内容</p>
        </li>
    </ul>
</div>



<!--分页页面按钮-->
<div class="container mt-3">
    <ul class="pagination justify-content-center" style="margin:20px 0">
        <!-- 上一页需要判断当前页是否已经是第一页-->
        <li class="page-item"><a class="page-link" th:href="@{'/page/'+${page==1?1:page-1}}">上一页</a></li>
        <!-- 高亮当前页按钮-->
        <li th:each="i:${#numbers.sequence(1, totalPage)}"
            th:class="${page==i}?'page-item active':'page-item'">
            <a class="page-link" th:href="@{'/page/'+${i}}" th:text="${i}">1</a>
        </li>
        <!-- 下一页需要判断当前页是否已经是最后一页-->
        <li class="page-item"><a class="page-link"
                                 th:href="@{'/page/'+${page==totalPage?totalPage:page+1}}">下一页</a></li>
    </ul>
</div>

<div class="footer">
    <div class='lie'>
        <nav class="navbar navbar-expand-sm bg-light">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/}">公告</a>
                </li>
                <li class="nav-item" sec:authorize="isAnonymous()">
                    <a class="nav-link" th:href="@{/}">网站相关</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/}">客户服务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/}">联系我们</a>
                </li>
            </ul>
        </nav>
    </div>

    <p>如有问题，请联系在线客服。工作时间：9:00-21:00</p>

    <p>copyright©2010-2022</p>
</div>

</body>
<style>
    .navbar navbar-expand-sm bg-light{
        width: 100%;
        height: 100px;
        background-color: rgba(20, 140, 252);
    }
    .nav-item{
        margin: 10px;
    }
    .footer{
        width: 100%;
        height: 150px;
        background:rgba(235, 235, 235);
        font-size: 18px;
        color: white;
        margin: -30px auto;
    }
    .footer p{
        text-align: center;
        line-height: 20px;
    }
</style>
</html>